<template>
	<view class="d-flex flex-column align-center">
		<image src="../../static/logo.png" class="topimg"></image>
		<view class="head" v-if="info">
			<text class="mb-1">*此页面为申请管理员页面</text>
			<view class="modify-title">申请信息</view>

			<view class="modify-info">
				<view>姓名:
					<input placeholder="请输入姓名" type="text" class="modify-input" v-model="staff.username" />
				</view>
				<view>电话:
					<input placeholder="请输入电话号码" type="number" maxlength="11" v-model="staff.userphone" class="modify-input mb-7" />
				</view>
				<view><button class="modify-but" @click="shenqing">申请成为管理员</button></view>
			</view>
		</view>

		<view v-else class="else">
			<view class="else1">
				<!-- <view>{{this.msg}}</view> -->
				<view>申请成功，请耐心等待审核</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: true,
				staff: {
					username: '',
					userphone: '',
				},
				msg: '',
				factory_id: 0,
			};
		},
		onLoad(e) {
			this.$comm.appLogin(user_info=>{
				this.apply_info()
			})
		},
		methods: {
			// 获取员工状态
			apply_info() {
				this.$comm.request({
					url: 'api/apply_info',
					method: 'GET',
					success: (res) => {
						console.log(res,'api/apply_info')
						if (res.data.code == 201) return
						let status = res.data.msg.status
						if (status == 1) {
							this.info = false
							uni.navigateTo({
								url: 'activity'
							})
							return
						} else if (status == 0) {
							this.info = false
						}
					}
				})
			},

			// 员工申请
			shenqing() {
				let data = this.staff;
				if (data.username == '') {
					uni.showToast({
						title: '姓名不能为空',
						icon:'none'
					})
					return false
				}
				if (data.userphone == '') {
					uni.showToast({
						title: '电话不能为空',
						icon: 'none'
					})
					return false;
				} else {
					let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
					if (!myreg.test(data.userphone)) {
						uni.showToast({
							title: '手机号码不合法',
							icon: 'none'
						});
						return false;
					}
				}
				this.$comm.request({
					url: 'api/admin_apply',
					method: 'POST',
					data: {
						name: data.username,
						tel: data.userphone,
					},
					success: res => {
						if (res.statusCode == 200) {
							this.info = false
							this.msg = res.msg
							return
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
	
	page {
		font-size: 30rpx;
		background-image: url(../../static/backimg.jpg);
		background-repeat: no-repeat;
	}

	.head {
		width: 650rpx;
		background-color: #fff;
		padding: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		// margin: 0 60rpx 0 60rpx;
	}

	.topimg {
		width: 100px;
		height: 50px;
	}

	@mixin but {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background-color: #475dfc;
		color: #ffffff;
	}

	.modify-but {
		@include but;
	}

	.else {
		width: 650rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.else1 {
		text-align: center;
		font-size: 35rpx;
		margin-top: 120rpx;
	}

	.modify-input {
		background-color: rgba(0, 0, 0, 0.2);
		color: #000000;
		height: 70rpx;
		margin-top: 5rpx;
		padding-left: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
	}

	.modify-title {
		// width: 500rpx;
		text-align: center;
		font-size: 45rpx;
		margin-bottom: 40rpx;
	}

	.modify-info {
		display: flex;
		line-height: 1.5;
		flex-direction: column;
		color: #000000;
		width: 95%;
		font-size: 30rpx;
	}
</style>
